<template>
	<view class="contents">
		<view class="head">
			<image src="../../static/banner2.png" mode=""></image>
			<view class="huod" @click="guize()">
				活动规则
			</view>
		</view>
		<!-- 头部结束 -->
		<view class="two_x">
			<view class="head-nav">
				<!-- 头部选项卡 -->
				<view class="xianshi">
					<image src="../../static/t5.png" mode=""></image>
				</view>
				<view :class="listIndex==index?'activite':''" @click="checkListIndex(index)"
					v-for="(item,index) in navList" :key="index">
					<text>{{item.name}}</text></br>
					<text>{{item.text}}</text>
				</view>
			</view>



			<view class="tabs_main flex" v-if="listIndex==0">

				<scroll-view scroll-x="true">
					<view class="tab-scroll_box">
						<!-- 选项卡类别列表 -->
						<view class="tab-scroll_item flex" v-for=" (item,index) in tabss" :key="index">
							<view class="zuo"  @click="dangshi()">
								<p>{{item.name}}</p>
								<p>{{item.zi}}</p>
								<p>{{item.zi1}}</p>

							</view>
							<view class="you">
								<button>{{item.but}}</button>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<!-- 0 -->
			<view class="tabs_main flex" v-if="listIndex==1">

				<scroll-view scroll-x="true">
					<view class="tab-scroll_box">
						<!-- 选项卡类别列表 -->
						<view class="tab-scroll_item flex" v-for=" (item,index) in tabss" :key="index">
							<view class="zuo">
								<p>{{item.name}}</p>
								<p>{{item.zi}}</p>
								<p>{{item.zi1}}</p>

							</view>
							<view class="you">
								<button>{{item.but}}</button>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<!-- 1 -->
			<view class="tabs_main flex" v-if="listIndex==2">

				<scroll-view scroll-x="true">
					<view class="tab-scroll_box">
						<!-- 选项卡类别列表 -->
						<view class="tab-scroll_item flex" v-for=" (item,index) in tabss" :key="index">
							<view class="zuo">
								<p>{{item.name}}</p>
								<p>{{item.zi}}</p>
								<p>{{item.zi1}}</p>

							</view>
							<view class="you">
								<button>{{item.but}}</button>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<!-- 2 -->
			<view class="tabs_main flex" v-if="listIndex==3">

				<scroll-view scroll-x="true">
					<view class="tab-scroll_box">
						<!-- 选项卡类别列表 -->
						<view class="tab-scroll_item flex" v-for=" (item,index) in tabss" :key="index">
							<view class="zuo">
								<p>{{item.name}}</p>
								<p>{{item.zi}}</p>
								<p>{{item.zi1}}</p>

							</view>
							<view class="you">
								<button>{{item.but}}</button>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
			<!-- 3 -->
		</view>
		<!-- 第一个 -->
		<view class="three">
			<scroll-view :scroll-into-view="'ss'+current" scroll-x="true">
				<view class="tabs flex">
					<text :id="'ss'+index" @click="chooseTab(index)" :class="current==index ? 'cur' : ''"
						v-for="(item,index) in tabs" :key="index">{{item.name}}</text>
				</view>
			</scroll-view>
			<view class="tabs_main">
				<view class="du_mains" v-if="current==0">
					<view class="du_box1" @click="sheng1()">
						<p class="fuli">福利特惠</p>
						<view class="three_box1 flex">
							<view class="t_b_zuo" v-for="(item,index) in quanbu" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<p>{{item.text1}}</p>
								<p class="text2">{{item.text2}}</p>
								<view class="text_san flex">
									<view class="t_san_top">
										<p class="text34">{{item.text3}}{{item.text4}}</p>
								    <p class="text5">{{item.text5}}</p>
									</view>
									<p class="text6">{{item.text6}}</p>
								</view>
							</view>
						</view>
					</view>
					<!-- 1 -->
					<view class="du_box1" @click="sheng1()">
						<p class="fuli">加油常买</p>
						<view class="three_box1 flex">
							<view class="t_b_zuo" v-for="(item,index) in jiay" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<p>{{item.text1}}</p>
								<p class="text2">{{item.text2}}</p>
								<view class="text_san flex">
									<view class="t_san_top">
										<p class="text34">{{item.text3}}{{item.text4}}</p>
								    <p class="text5">{{item.text5}}</p>
									</view>
									<p class="text6">{{item.text6}}</p>
								</view>
							</view>
						</view>
					</view>
					<!-- 2 -->
					<view class="du_box1" @click="sheng1()">
						<p class="fuli">月油耗400</p>
						<view class="three_box1">
							<view class="t_b_zuo1" v-for="(item,index) in yueyou4" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<p>{{item.text1}}</p>
								<p class="text2">{{item.text2}}</p>
								<view class="text_san flex">
									<view class="t_san_top">
										<p class="text34">{{item.text3}}{{item.text4}}</p>
								    <p class="text5">{{item.text5}}</p>
									</view>
									<p class="text6">{{item.text6}}</p>
								</view>
							</view>
						</view>
					</view>
					<!-- 3 -->
					<view class="du_box1" @click="sheng1()">
						<p class="fuli">月油耗600</p>
						<view class="three_box1">
							<view class="t_b_zuo1" v-for="(item,index) in yueyou6" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<p>{{item.text1}}</p>
								<p class="text2">{{item.text2}}</p>
								<view class="text_san flex">
									<view class="t_san_top">
										<p class="text34">{{item.text3}}{{item.text4}}</p>
								    <p class="text5">{{item.text5}}</p>
									</view>
									<p class="text6">{{item.text6}}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="du_mains" v-if="current==1">
					<view class="du_box1" @click="sheng1()">
						<p class="fuli">福利特惠</p>
						<view class="three_box1 flex">
							<view class="t_b_zuo" v-for="(item,index) in quanbu" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<p>{{item.text1}}</p>
								<p class="text2">{{item.text2}}</p>
								<view class="text_san flex">
									<view class="t_san_top">
										<p class="text34">{{item.text3}}{{item.text4}}</p>
								    <p class="text5">{{item.text5}}</p>
									</view>
									<p class="text6">{{item.text6}}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="du_mains" v-if="current==2">
					<view class="du_box1" @click="sheng1()">
						<p class="fuli">加油常买</p>
						<view class="three_box1 flex">
							<view class="t_b_zuo" v-for="(item,index) in jiay" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<p>{{item.text1}}</p>
								<p class="text2">{{item.text2}}</p>
								<view class="text_san flex">
									<view class="t_san_top">
										<p class="text34">{{item.text3}}{{item.text4}}</p>
								    <p class="text5">{{item.text5}}</p>
									</view>
									<p class="text6">{{item.text6}}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="du_mains" v-if="current==3">
					<view class="du_box1" @click="sheng1()">
						<p class="fuli">月油耗400</p>
						<view class="three_box1">
							<view class="t_b_zuo1" v-for="(item,index) in yueyou4" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<p>{{item.text1}}</p>
								<p class="text2">{{item.text2}}</p>
								<view class="text_san flex">
									<view class="t_san_top">
										<p class="text34">{{item.text3}}{{item.text4}}</p>
								    <p class="text5">{{item.text5}}</p>
									</view>
									<p class="text6">{{item.text6}}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="du_mains" v-if="current==4">
					<view class="du_box1" @click="sheng1()">
						<p class="fuli">月油耗600</p>
						<view class="three_box1">
							<view class="t_b_zuo1" v-for="(item,index) in yueyou6" :key="index">
								<image :src="item.img" mode="widthFix"></image>
								<p>{{item.text1}}</p>
								<p class="text2">{{item.text2}}</p>
								<view class="text_san flex">
									<view class="t_san_top">
										<p class="text34">{{item.text3}}{{item.text4}}</p>
								    <p class="text5">{{item.text5}}</p>
									</view>
									<p class="text6">{{item.text6}}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	  <view class="b_tan" :style="{display: currentId ? 'block' : 'none'}" >
	  	<view class="b_ding" v-show="currentId"> 
	  		<image src="../../static/删除.png" mode="" class="b_img1" @click="but()"></image>
	  		<view class="b_top">
	  			<p>450元优惠券包</p>
	  			<p>券包规则详见活动规则</p>
	  		</view>
	  		<view class="b_content">
	  			<scroll-view scroll-y="true" style="height:500rpx;">
	  				<view>
	  					<view v-for="(item,index) in list" :key="index" class="flex b_box">
	  						<view class="b_zuo">
	  							<p>{{item.num1}}<span>{{item.num2}}</span></p>
	  						</view>
	  						<view class="b_you">
	  							<p class="b_p1">{{item.num3}}</p>
	  							<p class="b_p2">{{item.num4}}</p>
	  							<p class="b_p3">{{item.num5}}</p>
	  						</view>
	  
	  					</view>
	  					<p>{{num6}}</p>
	  				</view>
	  			</scroll-view>
	  		</view>
	  		<view class="b_qiang">
	  			<button>抢购</button>
	  		</view>
	  	</view>
	  </view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [{
					name: '全部',
					id: '1'
				}, {
					name: '福利特惠',
					id: '2'
				}, {
					name: '加油常买',
					id: '3'
				}, {
					name: '月油耗400',
					id: '4'
				}, {
					name: '月油耗600',
					id: '5'
				}],
				current: 0,
				navList: [{
						name: '00:00',
						text: '正在进行',
						id: '1'
					}, {
						name: '12:00',
						text: '即将进行',
						id: '2'
					}, {
						name: '16:00',
						text: '即将进行',
						id: '3'
					},
					{
						name: '20:00',
						text: '即将进行',
						id: '4'
					}
				],
				tabss: [{
						id: 1,
						name: '￥239',
						zi: "自营满200减45",
						zi1: "元×10张",
						but: '抢购'

					},
					{
						id: 2,
						name: '￥239',
						zi: "自营满200减45",
						zi1: "元×10张",
						but: '抢购'
					},
					{
						id: 3,
						name: '￥239',
						zi: "自营满200减45",
						zi1: "元×10张",
						but: '抢购'
					},
				],
				tabs2: [{
						id: 1,
						name: '￥239',
						zi: "自营满200减45",
						zi1: "元×10张",
						but: '抢购'

					},
					{
						id: 2,
						name: '￥239',
						zi: "自营满200减45",
						zi1: "元×10张",
						but: '抢购'
					},
					{
						id: 3,
						name: '￥239',
						zi: "自营满200减45",
						zi1: "元×10张",
						but: '抢购'
					},
				],
				listIndex: 0,
				quanbu:[
					{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
					{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"}
				],
				jiay:[{img:'../../static/t4.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"}],
				yueyou4:[{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
				{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"}
				],
				yueyou6:[
					{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
					{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
					{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"},
					{img:'../../static/q1_02.png',text1:'2616元加油券包',text2:'300-109,大额油券来袭',text3:'￥',text4:'1818',text5:'已售3560',text6:"抢购"}
				],
				currentId:false,
				num6: '到底了',
				list: [{
						num1: '45',
						num2: '元',
						num3: '45元满减券',
						num4: '满200元使用',
						num5: '领取后当天生效'
					},
					{
						num1: '45',
						num2: '元',
						num3: '45元满减券',
						num4: '满200元使用',
						num5: '领取后当天生效'
					},
					{
						num1: '45',
						num2: '元',
						num3: '45元满减券',
						num4: '满200元使用',
						num5: '领取后当天生效'
					}, {
						num1: '45',
						num2: '元',
						num3: '45元满减券',
						num4: '满200元使用',
						num5: '领取后当天生效'
					},
					{
						num1: '45',
						num2: '元',
						num3: '45元满减券',
						num4: '满200元使用',
						num5: '领取后当天生效'
					},
					{
						num1: '45',
						num2: '元',
						num3: '45元满减券',
						num4: '满200元使用',
						num5: '领取后当天生效'
					},
					{
						num1: '45',
						num2: '元',
						num3: '45元满减券',
						num4: '满200元使用',
						num5: '领取后当天生效'
					},
					{
						num1: '45',
						num2: '元',
						num3: '45元满减券',
						num4: '满200元使用',
						num5: '领取后当天生效',
				
					}
				]
			}
		},
		methods: {
			chooseTab(index) {
				console.log(index)
				this.current = index
			},
			checkListIndex(index) {
				this.listIndex = index;
			},
			guize: function() {
				uni.navigateTo({
					url: "./guize"
				})
			},
			sheng1:function(){
				uni.navigateTo({
					url:"./sheng1"
				})
			},
			dangshi: function() {
				let that = this
				that.currentId = !that.currentId
				console.log(that.currentId)
				// uni.navigateTo({
				// 	url:"/pages/personal/today"
				// })
			
			},
			but: function() {
				let that = this
				that.currentId = !that.currentId
				console.log(that.currentId)
			}
		}

	}
</script>

<style lang="scss">
	@import url("../../static/css/quan.css");
	.flex {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.b_tan {
		display: none;
		background-color: rgba(0, 0, 0, 0.6);
		height: 2000rpx;
		color: #fff;
		text-align: center;

	}
	
	.b_img1 {
		position: absolute;
		top: -70rpx;
		width: 70rpx;
		height: 70rpx;
		right: -40rpx;
	}
	
	.b_ding {
		background-color: #f00;
		width: 70%;
		border-radius: 20rpx;
		position: fixed;
		top: 300rpx;
		left: 100rpx;
		z-index: 1;
	}
	
	.b_top {
		padding: 20rpx 0;
	}
	
	.b_content {
		text-align: center;
		height: 500rpx;
	}
	
	.b_qiang button {
		width: 50%;
		margin: 20rpx auto;
		background-color: #ffebcd;
		border-radius: 50rpx;
		color: #f00;
	}
	
	.b_box {
		width: 80%;
		margin: 10rpx auto;
		background-color: #ffebcd;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	
	.b_zuo {
		border-right: #fddeca dashed 3px;
		line-height: 30px;
		padding: 0 10rpx;
	}
	
	.b_zuo p {
		color: #f00;
		font-size: 25px;
		font-weight: bold;
	}
	
	.b_zuo p span {
		font-size: 10px;
		font-weight: normal;
	}
	
	.b_you .b_p1 {
		color: #000;
	}
	
	.b_you .b_p2 {
		color: #f00;
	}
	
	.b_you .b_p3 {
		color: #ccc;
	}
</style>
